<script setup>
import {useCounterStore} from './store'
import {storeToRefs} from 'pinia'
import PiniaCom from './components/piniaCom.vue'
// 获取仓库
const store= useCounterStore()
// 尝试将仓库的数据解构后保持响应式()
const {count, count666, token, name} = storeToRefs(store)

</script>

<template>
  <div>
   <div>状态数据 {{count}}</div>
   <div>状态数据 {{name}} {{ token }}</div>
   <div>getters {{ count666 }}</div>
   <button @click="store.updateCount">+1</button>
   <button @click="store.asyncUpdateCount">延迟+1</button>

   <h1>子组件</h1>
   <PiniaCom/>
  </div>
</template>